revision:
<div class="grid-1">
<button class="display-left" onclick="plusDivs(-1)">❮</button>
<div class="container_alpha">
<img class="mySlides" src="../images/1.jpg" style="width:100%; image-rendering: pixelated;">
<img class="mySlides" src="../images/2.jpg" style="width:100%; image-rendering: pixelated;">
<img class="mySlides" src="../images/3.jpg" style="width:100%; image-rendering: pixelated;">
<img class="mySlides" src="../images/4.jpg" style="width:100%; image-rendering: pixelated;">
</div>
<button class="display-right" onclick="plusDivs(1)">❯</button>
</div>
<style>
.grid-1{display:grid; width: 30vw; height: 30vw; grid-template-columns: 2vw 26vw 2vw; margin-left: 20vw;}
.container_alpha{display: flex; flex-flow:row nowrap; height: 30vw; width:29vw; border: 1vw solid green;}
.mySlides {display:none; width:30vw; height: 30vw; margin-left: -0.27vw;}
button{display: inline-block; position: relative;width: 2vw; height: 4vw; top:15vw; }
.display-right{margin-left:2vw;}
</style>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<div class="slider">
<input type="radio" id="slide1" name="slide" checked>
<input type="radio" id="slide2" name="slide">
<input type="radio" id="slide3" name="slide">
<input type="radio" id="slide4" name="slide">
<ul>
<li><img src="../images/1.jpg"></li>
<li><img src="../images/2.jpg"></li>
<li><img src="../images/3.jpg"></li>
<li><img src="../images/4.jpg"></li>
</ul>
</div>
<style>
.slider-A {width: 29vw; height: 20vw; left: 0; position: relative; text-align: center; top: 0vw; margin-bottom: 5vw; margin-left: 20vw;}
.slider-A input {position: relative; top: -1.5vw;}
.slider-A ul {height: 15vw; position: relative; width: 29vw; -webkit-transform: perspective(1000); -webkit-transform-style: preserve-3d; -webkit-transition: 1s; transform: perspective(1000);
transform-style: preserve-3d; transition: 1s; margin-left: 3vw;}
.slider-A li {left: 0; list-style: none; position: absolute; top: 0; -webkit-transform: translateZ(7.5vw); -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d;
transform: translateZ(7.5em); transform-origin: 0 0; transform-style: preserve-3d;}
.slider-A li:nth-child(2) {-webkit-transform: rotateX(-90deg) translateY(-8.6vw) translateZ(15vw); transform: rotateX(-90deg) translateY(-8.6vw) translateZ(16vw);}
.slider-A li:nth-child(3) { -webkit-transform: rotateX(-180deg) translateY(-14.9vw) translateZ(8.5vw); transform: rotateX(-180deg) translateY(-15.9vw) translateZ(8.5vw);}
.slider-A li:nth-child(4) { -webkit-transform: rotateX(-270deg) translateY(-7.5vw); transform: rotateX(-270deg) translateY(-8.5vw);}
.slider-A img {height: 17vw; width: 26vw; vertical-align: top;}
#slide2:checked ~ ul {-webkit-transform: perspective(1000) rotateX(90deg); transform: perspective(1000) rotateX(90deg);}
#slide3:checked ~ ul {-webkit-transform: perspective(1000) rotateX(180deg); transform: perspective(1000) rotateX(180deg);}
#slide4:checked ~ ul {-webkit-transform: perspective(1000) rotateX(270deg); transform: perspective(1000) rotateX(270deg);}
</style>
click to play
<div class="slideshow">
<img class="fotos" src="../images/17.jpg">
<img class="fotos" src="../images/18.jpg">
<img class="fotos" src="../images/19.jpg">
<img class="fotos" src="../images/20.jpg">
<img class="fotos" src="../images/21.jpg">
<img class="fotos" src="../images/22.jpg">
<img class="fotos" src="../images/23.jpg">
<img class="fotos" src="../images/24.jpg">
<img class="fotos" src="../images/25.jpg">
<img class="fotos" src="../images/26.jpg">
<img class="fotos" src="../images/27.jpg">
<span class="toggle material-icons">pause</span>
<span class="dialog">click to play</span>
<div class="icons">
<span class="back material-icons">fast_rewind</span>
<span class="next material-icons">fast_forward</span>
</div>
</div>
<style>
.slideshow {width: 40vw; height: 40vw; margin-left: 20vw;background-color: lightgrey; margin-top: 1%; overflow: hidden; position: relative; border-radius: 2.5vw; transition: all 0.5s ease;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 30;}
.slideshow:hover .icons {transform: translateX(0vw);}
.slideshow:hover .toggle.paused {bottom: 0; left: 0; border-radius: 0 2.5vw; transform: none; font-size: 2vw; color: white; background: rgba(0,0,0,0.5);}
.slideshow:hover .dialog { opacity: 0; transform: translateY(-100%); transition: all 0.5s ease 0.5s;}
.toggle:hover:active, .toggle.paused:hover:active {transition: all 0s ease; transform: scale(0.85,0.85); background: rgba(0,0,0, 0.6); box-shadow: 0 0 0 5px rgba(255,255,255,0.25); }
.dialog {position: absolute; top: 0; z-index: 25; color: white; font-size: 1.2vw; color: white; right: 0; left: 0; text-align: center; height: 3vw; line-height: 2vw;
background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); transition: all 0.5s ease 1s; display: none; transform: translateY(0); }
.dialog.show {display: block;}
.caption {position: absolute; bottom: 0; z-index: 25; color: white; font-size: 2vw; color: white; display: block; text-align: center; height: 3.5vw; line-height: 3.5vw; background: rgba(0,0,0,0.5);
transition: all 0.5s ease 1s; transform: translateY(0); left: 50%; transform: translateX(-50%); padding: 0 1vw; border-radius: 0.6vw 0.6vw 0 0;}
.icons {background: linear-gradient(to bottom right, rgba(0,0,0,0) 50%, rgba(0,0,0,0.75)); position: absolute; z-index: 25; bottom: 0; right: 0; padding: 3.5vw 1vw 0 5.5vw;
border-radius: 100% 0 2.5vw 0; transition: all 0.25s ease; transform: translate(100%, 100%);}
.icons .material-icons { padding: 0.2vw 0; margin: 0; cursor: pointer; transition: all 0.25s ease; color: white; font-size: 2vw;}
.icons:hover .material-icons {font-size: 2vw; padding: 5px 0;}
.icons .material-icons:active { transition: all 0s ease; transform: scale(1.25, 1.25);}
.toggle {z-index: 25; position: absolute; bottom: 1vw; font-size: 1.2vw; left: 0; background: rgba(0,0,0,0.4); border-radius: 2.5vw; color: white; padding: 3px; transition: all 0.25s ease; cursor: pointer;
-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.toggle:hover {font-size: 1.2vw; background: rgba(0,0,0,0.5); padding: 0.5vw;}
.toggle.paused {font-size: 1.2vw; padding: 0.5vw; transform: translate(-50%, 50%);left: 50%; bottom: 50%; border-radius: 50%; background: rgba(0,0,0,0.7);}
.fotos {width: 70vw; height: 40vw;position: absolute; background-color: white; border-radius: 2.5vw; transition: all 0.5s ease; }
.fotos.hide {transition: transform 1s ease, opacity 0.5s ease 0.5s; opacity: 0;transform: scale(2, 2) translateY(-80%);}
.fotos.hide:first-child {z-index: 11; }
.fotos:nth-child(1) {z-index: 10;}
.fotos:nth-child(2) {z-index: 9;}
.fotos:nth-child(3) {z-index: 8;}
.fotos:nth-child(4) {z-index: 7;}
.fotos:nth-child(5) {z-index: 6;}
.fotos:nth-child(6) {z-index: 5;}
.fotos:nth-child(7) {z-index: 4;}
.fotos:nth-child(8) {z-index: 3;}
.fotos:nth-child(9) {z-index: 2;}
.fotos:nth-child(10) {z-index: 1;}
.fotos:last-child {z-index: 0;}
@media screen and (max-width: 1000px) {
.fotos {width: 80vw; height: 45vw;}
.slideshow {width: 80vw; height: 45vw;}
}
@media screen and (max-width: 825px) {
.fotos { width: 640px; height: 360px;}
.slideshow { width: 640px;height: 360px;}
}
@media screen and (max-width: 665px) {
.fotos { width: 480px;height: 270px;}
.slideshow {width: 480px; height: 270px;}
}
@media screen and (max-width: 485px) {
.fotos {width: 320px; height: 180px;}
.slideshow {width: 320px; height: 180px;}
}
@keyframes shake {
0% { }
25% {transform: rotate(15deg)}
50% {transform: rotate(-15deg)}
75% {transform: rotate(15deg)}
100% {transform: rotate(0deg)}
}
</style>
<script>
let img = document.getElementsByClassName('fotos');
let slideShow = function() {
if (!img[0].classList.contains('hide')) {img[0].classList.add('hide');
} else if (!img[1].classList.contains('hide')) {img[1].classList.add('hide');
} else if (!img[2].classList.contains('hide')) {img[2].classList.add('hide');
} else if (!img[3].classList.contains('hide')) {img[3].classList.add('hide');
} else if (!img[4].classList.contains('hide')) {img[4].classList.add('hide');
} else if (!img[5].classList.contains('hide')) {img[5].classList.add('hide');
} else if (!img[6].classList.contains('hide')) {img[6].classList.add('hide');
} else if (!img[7].classList.contains('hide')) {img[7].classList.add('hide');
} else if (!img[8].classList.contains('hide')) {img[8].classList.add('hide');
} else if (!img[9].classList.contains('hide')) {img[9].classList.add('hide');
} else if (!img[10].classList.contains('hide')) {img[10].classList.add('hide');
} else {
img[0].classList.remove('hide');
img[1].classList.remove('hide');
img[2].classList.remove('hide');
img[3].classList.remove('hide');
img[4].classList.remove('hide');
img[5].classList.remove('hide');
img[6].classList.remove('hide');
img[7].classList.remove('hide');
img[8].classList.remove('hide');
img[9].classList.remove('hide');
img[10].classList.remove('hide');
}
};
let reverse = function() {
if (img[10].classList.contains('hide')) {img[10].classList.remove('hide');
} else if (img[9].classList.contains('hide')) {img[9].classList.remove('hide');
} else if (img[8].classList.contains('hide')) {img[8].classList.remove('hide');
} else if (img[7].classList.contains('hide')) {img[7].classList.remove('hide');
} else if (img[6].classList.contains('hide')) {img[6].classList.remove('hide');
} else if (img[5].classList.contains('hide')) {img[5].classList.remove('hide');
} else if (img[4].classList.contains('hide')) {img[4].classList.remove('hide');
} else if (img[3].classList.contains('hide')) {img[3].classList.remove('hide');
} else if (img[2].classList.contains('hide')) {img[2].classList.remove('hide');
} else if (img[1].classList.contains('hide')) {img[1].classList.remove('hide');
} else if (img[0].classList.contains('hide')) {img[0].classList.remove('hide');
} else {
img[10].classList.add('hide');
img[9].classList.add('hide');
img[8].classList.add('hide');
img[7].classList.add('hide');
img[6].classList.add('hide');
img[5].classList.add('hide');
img[4].classList.add('hide');
img[3].classList.add('hide');
img[2].classList.add('hide');
img[1].classList.add('hide');
img[0].classList.add('hide');
}
}
let start = setInterval(slideShow, 3000);
var toggled = true;
function toggle(bool) {
if (toggled | bool) {
clearInterval(start);
toggled = false;
$('.toggle').html('play_arrow');
$('.toggle').addClass('paused');
$('.dialog').addClass('show');
} else {
start = setInterval(slideShow, 3000);
toggled = true;
$('.toggle').html('pause');
$('.toggle').removeClass('paused');
$('.dialog').removeClass('show');
}
}
var transition = false;
$('.slideshow').click(function(e) {
if ($(e.target).is('.toggle')) {
toggle();
} else if ($(e.target).is('.next')) {
toggle(true);
if (transition == false) {
transition = true;
setTimeout(function() {
slideShow();
transition = false;
}, 250);
}
} else if ($(e.target).is('.back')) {
toggle(true);
if (transition == false) {
transition = true;
setTimeout(function() {
reverse();
transition = false;
}, 250);
}
} else {
toggle();
}
});
function launchIntoFullscreen(element) {
if(element.requestFullscreen) {element.requestFullscreen();
} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) { element.msRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) { document.exitFullscreen();
} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();
}
}
var fullscreen = false;
$('.slideshow').dblclick(function(e) {
if (!$(e.target).is('.material-icons')) {
fullscreen ? exitFullscreen() : launchIntoFullscreen(document.documentElement);
fullscreen ? fullscreen = false : fullscreen = true;
}
});
</script>
<div class="container-1 spec">
<div class="carousel-view">
<button id="prev-btn" class="prev-btn">
<svg viewBox="0 0 512 512" width="40" title="chevron-circle-left">
<path d="M256 504C119 504 8 393 8 256S119 8 256 8s248 111 248 248-111 248-248 248zM142.1 273l135.5 135.5c9.4 9.4
24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L226.9 256l101.6-101.6c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.
4-33.9 0L142.1 239c-9.4 9.4-9.4 24.6 0 34z" />
</svg>
</button>
<div id="item-list" class="item-list">
<img id="item" class="item" src="../images/1.jpg"/>
<img id="item" class="item" src="../images/2.jpg"/>
<img id="item" class="item" src="../images/3.jpg"/>
<img id="item" class="item" src="../images/4.jpg"/>
<img id="item" class="item" src="../images/5.jpg"/>
<img id="item" class="item" src="../images/6.jpg"/>
<img id="item" class="item" src="../images/7.jpg"/>
</div>
<button id="next-btn" class="next-btn">
<svg viewBox="0 0 512 512" width="40" title="chevron-circle-right">
<path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm113.9 231L234.4 103.5c-9.4-9.4-24.
6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L285.1 256 183.5 357.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4
33.9 0L369.9 273c9.4-9.4 9.4-24.6 0-34z" />
</svg>
</button>
</div>
</div>
<style>
button{border: none; cursor: pointer; color: white; background: none; transition: all .3s ease-in-out;}
.carousel-view {display: flex; justify-content: space-between; align-items: center; width: 80vw; height: 40vh; gap: 1vw; margin-left: 5vw;padding: 2vw 2vw; transition: all 0.25s ease-in;
background-color: skyblue;}
.carousel-view .item-list { max-width: 60vw; padding: 2vw 1vw; display: flex; gap: 0.5vw; scroll-behavior: smooth; transition: all 0.25s ease-in; -ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */ overflow: auto; scroll-snap-type: x mandatory;}
/* Hide scrollbar for Chrome, Safari and Opera */
.item-list::-webkit-scrollbar { display: none;}
.prev-btn {background: none; cursor: pointer; position:relative; top: 0;right: 3vw;}
.next-btn {background: none; cursor: pointer; position: relative; top: 0;}
.item {scroll-snap-align: center; min-width: 20vw; height: 15vw; background-color: deeppink; border-radius:1vw;}
</style>
<script>
const prev = document.getElementById('prev-btn')
const next = document.getElementById('next-btn')
const list = document.getElementById('item-list')
const itemWidth = 150
const padding = 10
prev.addEventListener('click',()=>{
list.scrollLeft -= itemWidth + padding
})
next.addEventListener('click',()=>{
list.scrollLeft += itemWidth + padding
})
</script>
<div class="lw-rotate-slider">
<ul class="lw-slides">
<li><div class="lw-inner"></div></li>
<li><div class="lw-inner"></div></li>
<li><div class="lw-inner"></div></li>
<li><div class="lw-inner"></div></li>
<li><div class="lw-inner"></div></li>
<li><div class="lw-inner"></div></li>
</ul>
</div>
<svg>
<defs>
<clipPath id="lw-slideClip">
<path />
</clipPath>
</defs>
</svg>
<style>
.lw-rotate-slider{margin: 1vw auto; height: 100vh; width: 90vw;}
.lw-rotate-slider ul.lw-slides{height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; top: -10% ; left: 50%; -ms-transform-origin: center center; transform-origin: center center; }
.lw-rotate-slider ul.lw-slides.animate{-webkit-transition: all 0.75s ease-in-out; transition: all 0.75s ease-in-out;}
.lw-rotate-slider ul.lw-slides li{background-position: center; background-size: cover; display: block; color: #fff; list-style: none; position: absolute; top: 0; left: 50%; text-align: center;
-ms-transform-origin: bottom center; transform-origin: bottom center; width: 100%;}
.lw-rotate-slider ul.lw-slides li:nth-of-type(1){background-image: url("../images/17.jpg"); }
.lw-rotate-slider ul.lw-slides li:nth-of-type(2){background-image: url('../images/12.jpg');}
.lw-rotate-slider ul.lw-slides li:nth-of-type(3){background-image: url("../images/25.jpg");}
.lw-rotate-slider ul.lw-slides li:nth-of-type(4){background-image: url('../images/5.jpg');}
.lw-rotate-slider ul.lw-slides li:nth-of-type(5){background-image: url("../images/23.jpg");}
.lw-rotate-slider ul.lw-slides li:nth-of-type(6){background-image: url("../images/24.jpg");}
.lw-rotate-slider ul.lw-slides li .lw-inner{box-sizing: border-box; padding: 1vw; height: 100%; width: 100%;}
</style>
<script>
/* Radians to Degrees: x * Math.PI/180; */
$(function(){
/* Settings */
var rotateSlider = {
slideHeight : 200,
slideWidth : 200,
};
/* Do Math and set properties */
rotateSlider.slideCount = $('.lw-rotate-slider .lw-slides li').length;
rotateSlider.slideAngle = 360 / $('.lw-rotate-slider .lw-slides li').length;
rotateSlider.sliderElement = $('.lw-rotate-slider');
rotateSlider.slides = $('.lw-rotate-slider .lw-slides li');
rotateSlider.slidesContainer = $('.lw-rotate-slider .lw-slides');
rotateSlider.slideAngle = 360 / rotateSlider.slideCount;
rotateSlider.halfAngleRad = rotateSlider.slideAngle / 2 * Math.PI/180;
rotateSlider.innerRadius = 1 / Math.tan(rotateSlider.halfAngleRad) * rotateSlider.slideWidth / 2;
rotateSlider.outerRadius = Math.sqrt(Math.pow(rotateSlider.innerRadius + rotateSlider.slideHeight, 2) + (Math.pow((rotateSlider.slideWidth / 2), 2)));
rotateSlider.upperArcHeight = rotateSlider.outerRadius - (rotateSlider.innerRadius + rotateSlider.slideHeight);
rotateSlider.lowerArcHeight = rotateSlider.innerRadius - (rotateSlider.innerRadius * (Math.cos(rotateSlider.halfAngleRad)));
rotateSlider.slideFullWidth = (Math.sin(rotateSlider.halfAngleRad) * rotateSlider.outerRadius)*2;
rotateSlider.slideFullHeight = rotateSlider.upperArcHeight + rotateSlider.slideHeight + rotateSlider.lowerArcHeight
rotateSlider.slideSidePadding = (rotateSlider.slideFullWidth - rotateSlider.slideWidth) / 2;
rotateSlider.fullArcHeight = rotateSlider.outerRadius - (rotateSlider.outerRadius * (Math.cos(rotateSlider.halfAngleRad)));
rotateSlider.lowerArcOffset = (rotateSlider.slideFullWidth - (Math.sin(rotateSlider.halfAngleRad) * rotateSlider.innerRadius * 2)) / 2;
/* Set height and width of slider element */
rotateSlider.sliderElement.css('height', rotateSlider.slideHeight +'px');
rotateSlider.sliderElement.css('width', rotateSlider.slideWidth +'px');
/* Set height and width of slides container and offset width*/
rotateSlider.slidesContainer.css('height', rotateSlider.outerRadius*2+'px');
rotateSlider.slidesContainer.css('width', rotateSlider.outerRadius*2+'px');
/* Offset width and arc height */
rotateSlider.slidesContainer.css('transform', 'translateX(-50%)');
rotateSlider.slidesContainer.css('top', '-'+ rotateSlider.upperArcHeight +'px');
/* Generate path for slide clipping */
var pathCoords = 'M 0 '+rotateSlider.fullArcHeight;
pathCoords += ' A '+rotateSlider.outerRadius+' '+rotateSlider.outerRadius+' 0 0 1 '+rotateSlider.slideFullWidth+' '+rotateSlider.fullArcHeight;
pathCoords += ' L '+(rotateSlider.slideFullWidth-rotateSlider.lowerArcOffset)+' '+rotateSlider.slideFullHeight;
pathCoords += ' A '+rotateSlider.innerRadius+' '+rotateSlider.innerRadius+' 0 0 0 '+rotateSlider.lowerArcOffset+' '+rotateSlider.slideFullHeight+' Z';
$('#slideClip').find('path').attr('d', pathCoords);
/* Apply styles to each slide */
var i = 0;
rotateSlider.slides.each(function(){
/* Set distance from point of rotation */
$(this).css('transform-origin', 'center '+(rotateSlider.innerRadius + rotateSlider.slideHeight)+'px');
/* Set slide Height and Width */
$(this).css('height', rotateSlider.slideHeight+'px');
$(this).css('width', rotateSlider.slideWidth+'px');
/* Set calculated padding for width, upper arc height, and lower arc height */
$(this).css('padding', rotateSlider.upperArcHeight +'px '+rotateSlider.slideSidePadding+'px '+rotateSlider.lowerArcHeight+'px '+rotateSlider.slideSidePadding+'px ');
/* Offset container Arc Height */
$(this).css('top', rotateSlider.upperArcHeight +'px');
/* Offset Width, then Rotate Slide, then offset individual Top Arcs */
$(this).css('transform', 'translateX(-50%) rotate('+rotateSlider.slideAngle * i+'deg) translateY(-'+ rotateSlider.upperArcHeight +'px)');
/* Add clipping path */
$(this).css('-webkit-clip-path', 'url(#slideClip)');
$(this).css('clip-path', 'url(#slideClip)');
i++;
});
/* Set Interval to rotate */
var currentRotation = 0;
var rotateInterval = window.setInterval(function(){
if(!rotateSlider.slidesContainer.hasClass('animate')){
rotateSlider.slidesContainer.addClass('animate')
}
currentRotation = currentRotation - rotateSlider.slideAngle;
rotateSlider.slidesContainer.css('transform', 'translateX(-50%) rotate('+currentRotation+'deg)');
}, 4000);
});
</script>
<div class="lw-container">
<ul class="lw-slides">
<li id="lw-slide1"><img src="../images/1.jpg" alt="" width="100%"; height="100%"/></li>
<li id="lw-slide2"><img src="../images/2.jpg" alt="" width="100%"; height="100%"/></li>
<li id="lw-slide3"><img src="../images/3.jpg" alt="" width="100%"; height="100%" /></li>
<li id="lw-slide4"><img src="../images/4.jpg" alt="" width="100%"; height="100%" /></li>
<li id="lw-slide5"><img src="../images/5.jpg" alt="" width="100%"; height="100%" /></li>
</ul>
<ul class="lw-thumbnails">
<li><a href="#lw-slide1"><img src="../images/1.jpg" /></a></li>
<li><a href="#lw-slide2"><img src="../images/2.jpg" /></a></li>
<li><a href="#lw-slide3"><img src="../images/3.jpg" /></a></li>
<li><a href="#lw-slide4"><img src="../images/4.jpg" /></a></li>
<li><a href="#lw-slide5"><img src="../images/5.jpg" /></a></li>
</ul>
</div>
<style>
.lw-container {display: flex; flex-flow: row nowrap; justify-content: center; width: 60vw; height: 100vh;}
.lw-slides {overflow: hidden; width: 50vw; height: 40vw;}
.lw-thumbnails {display: flex; flex-direction: column; line-height: 0;}
.lw-thumbnails li {flex: auto;}
.lw-thumbnails a {display: block;}
.lw-thumbnails img {width: 15vw; height: 5vw;-o-object-fit: cover; object-fit: cover;-o-object-position: top; object-position: top;}
.lw-slides li {width: 50vw; height: 30vw; position: absolute; z-index: 1;}
.lw-slides img {height: 100vmin; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top;}
.lw-slides li:target {z-index: 3; -webkit-animation: moveDown 1s 1; animation: moveDown 1s 1;}
.lw-slides li:not(:target) {-webkit-animation: hidden 1s 1; animation: hidden 1s 1;}
@-webkit-keyframes moveDown {
0% {transform: translateY(-100%);}
100% {transform: translateY(0%);}
}
@keyframes moveDown {
0% {transform: translateY(-100%);}
100% {transform: translateY(0%);}
}
@-webkit-keyframes hidden {
0% {z-index: 2;}
100% {z-index: 2;}
}
@keyframes hidden {
0% {z-index: 2;}
100% {z-index: 2;}
}
</style>
<ul id="box">
<input type="radio" name="radio-btn" id="img-1" checked />
<li id="img-container">
<div id="img-inner"><img src="../images/20.jpg"></div>
<label for="img-6" class="sb-bignav" title="Previous">‹</label>
<label for="img-2" class="sb-bignav" title="Next">›</label>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li id="img-container">
<div id="img-inner"><img src="../images/21.jpg"></div>
<label for="img-1" class="sb-bignav" title="Previous">‹</label>
<label for="img-3" class="sb-bignav" title="Next">›</label>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li id="img-container">
<div id="img-inner"><img src="../images/22.jpg"></div>
<label for="img-2" class="sb-bignav" title="Previous">‹</label>
<label for="img-4" class="sb-bignav" title="Next">›</label>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li id="img-container">
<div id="img-inner"><img src="../image/23.jpg"></div>
<label for="img-3" class="sb-bignav" title="Previous">‹</label>
<label for="img-5" class="sb-bignav" title="Next">›</label>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li id="img-container">
<div id="img-inner"><img src="../images/24.jpg"></div>
<label for="img-4" class="sb-bignav" title="Previous">‹</label>
<label for="img-6" class="sb-bignav" title="Next">›</label>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li id="img-container">
<div id="img-inner"><img src="../images/26.jpg"></div>
<label for="img-5" class="sb-bignav" title="Previous">‹</label>
<label for="img-1" class="sb-bignav" title="Next">›</label>
</li>
</ul>
<style>
ul, li { display: block; }
#box {width: 50vw; height: 30vw; display: block; position: relative; margin-left: 30vw;}
#box * {user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#box input { display: none; }
#img-inner { top: 0; opacity: 0; width: 609px; height: 405px; display: block; position: absolute; transform: scale(0); -moz-transform: scale(0); -webkit-transform: scale(0);
transition: all .7s ease-in-out;-moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out;}
#img-inner img {width: 100%; height: 100%;}
#img-inner:nth-of-type(1) {
/* And... CSS3 image preloading :D */
background-image:
url("../images/20.jpg"),
url("../images/21.jpg"),
url("../images/22.jpg"),
url("../images/23.jpg"),
url("../images/24.jpg"),
url("../images/25.jpg");
}
#img-inner:hover ~ label.sb-bignav { opacity: 0.5; }
label.sb-bignav:hover { opacity: 1; }
.sb-bignav {width: 15vw; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; -moz-transition: opacity .2s;
-webkit-transition: opacity .2s; color: white; font-size: 10vw; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif;background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);}
label[title="Next"] { right: 0; }
input:checked + li > #img-inner {opacity: 1; transform: scale(1); -moz-transform: scale(1); -webkit-transform: scale(1); transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;}
input:checked + li > label { display: block; }
</style>
<section class="carousel" aria-label="Gallery">
<ol class="carousel_viewport">
<li id="carousel_slide1" tabindex="0" class="carousel_slide"></li>
<li id="carousel_slide2" tabindex="0" class="carousel_slide"></li>
<li id="carousel_slide3" tabindex="0" class="carousel_slide"></li>
<li id="carousel_slide4" tabindex="0" class="carousel_slide"> </li>
</ol>
<aside class="carousel_navigation">
<ol class="carousel_navigation-list">
<li class="carousel_navigation-item"><a href="#carousel_slide1" class="carousel_navigation-button">Go to slide 1</a></li>
<li class="carousel_navigation-item"><a href="#carousel_slide2" class="carousel_navigation-button">Go to slide 2</a></li>
<li class="carousel_navigation-item"><a href="#carousel_slide3" class="carousel_navigation-button">Go to slide 3</a></li>
<li class="carousel_navigation-item"><a href="#carousel_slide4" class="carousel_navigation-button">Go to slide 4</a></li>
</ol>
</aside>
</section>
<style>
@keyframes tonext {
75% {left: 0;}
95% {left: 100%;}
98% {left: 100%;}
99% {left: 0;}
}
@keyframes tostart {
75% {left: 0;}
95% {left: -300%;}
98% {left: -300%;}
99% {left: 0;}
}
@keyframes snap {
96% {scroll-snap-align: center;}
97% {scroll-snap-align: none;}
99% {scroll-snap-align: none;}
100% {scroll-snap-align: center;}
}
ol, li {list-style: none; margin: 0; padding: 0;}
.carousel { position: relative; padding-top: 15%; filter: drop-shadow(0 0 10px #0003); perspective: 100px;}
.carousel_viewport { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory;}
.carousel_slide { position: relative; flex: 0 0 100%; width: 100%; background-color: #f99; counter-increment: item;}
.carousel_slide:nth-child(even) { background-color: #99f;}
.carousel_slide:before {content: counter(item); position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-40%,70px); color: #fff; font-size: 2em;}
.carousel_snapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center;}
@media (hover: hover) {
.carousel_snapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 4s; animation-iteration-count: infinite;}
.carousel_slide:last-child .carousel_snapper {animation-name: tostart, snap;}
}
@media (prefers-reduced-motion: reduce) {
.carousel_snapper {animation-name: none;}
}
.carousel:hover .carousel_snapper, .carousel:focus-within .carousel_snapper {animation-name: none;}
.carousel_navigation { position: absolute; right: 0; bottom: 0; left: 0; text-align: center;}
.carousel_navigation-list, .carousel_navigation-item {display: inline-block;}
.carousel_navigation-button {display: inline-block; width: 1.5rem; height: 1.5rem;background-color: #333; background-clip: content-box; border: 0.25rem solid transparent; border-radius: 50%;
font-size: 0; transition: transform 0.1s;}
</style>
<ul class="w-slides">
<input type="radio" name="radio-btn" id="w-img-1" checked />
<li class="w-slide-container">
<div class="w-slide"><img src="../images/27.jpg" width="100%" height="auto"/></div>
<div class="w-nav">
<label for="w-img-3" class="w-prev">‹</label>
<label for="w-img-2" class="w-next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="w-img-2"/>
<li class="w-slide-container">
<div class="w- slide"><img src="../images/24.jpg" width="100%" height="auto"/></div>
<div class="w-nav">
<label for="w-img-1" class="w-prev">‹</label>
<label for="w-img-3" class="w-next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="w-img-3" />
<li class="w-slide-container">
<div class="w-slide"><img src="../images/25.jpg" width="100%" height="auto"/></div>
<div class="w-nav">
<label for="w-img-2" class="prev">‹</label>
<label for="w-img-1" class="next">›</label>
</div>
</li>
<li class="w-nav-dots">
<label for="w-img-1" class="w-nav-dot" id="img-dot-1"></label>
<label for="w-img-2" class="w-nav-dot" id="img-dot-2"></label>
<label for="w-img-3" class="w-nav-dot" id="img-dot-3"></label>
</li>
</ul>
<style>
.w-slides {padding: 0; width: 40vw; height: 30vw; display: block; margin: 0 auto; position: relative;}
.w-slides * {user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;}
.w-slides input {display: none;}
.w-slide-container {display: block; }
.w-slide {top: 0; opacity: 0; width: 40vw; height: 30vw; display: block; position: absolute; transform: translate(1,0); transition: all .7s ease-in-out;}
.w-slide img {width: 100%; height: 100%;}
.w-nav label {width: 40px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 40pt; text-align: center;line-height: 30vw;
font-family: "Arial", sans-serif; background-color: rgba(255, 255, 255, 0); text-shadow: 0px 0px 15px rgb(119, 119, 119);}
.w-slide:hover + .w-nav label { opacity: 0.5; }
.w-nav label:hover { opacity: 1; }
.w-nav .next { right: 0; }
input:checked + .w-slide-container .w-slide {opacity: 1; transition: opacity 1s ease-in-out;}
input:checked + .w-slide-container .w-nav label { display: block; }
.w-nav-dots {width: 100%; bottom: 9px;height: 11px; display: block; position: absolute; text-align: center;}
.w-nav-dots .w-nav-dot {top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: blue;}
.w-nav-dots .w-nav-dot:hover {cursor: pointer; background-color: white;}
input#img-1:checked ~ .w-nav-dots label#img-dot-1, input#img-2:checked ~ .w-nav-dots label#img-dot-2, input#img-3:checked ~ .w-nav-dots label#img-dot-3 {background: rgba(200, 200, 200, 0.8);}
</style>
<div class="boxes">
<div class="slider">
<input checked="checked" id="id1" name="ani" type="radio">
<label for="id1"><img src="../images/1.jpg" width="60"></label>
<img src="../images/1.jpg">
<input id="id2" name="ani" type="radio">
<label for="id2"><img src="../images/2.jpg" width="60"></label>
<img src="../images/2.jpg">
<input id="id3" name="ani" type="radio">
<label for="id3"><img src="../images//3.jpg" width="60"></label>
<img src="../images/3.jpg">
<input id="id4" name="ani" type="radio">
<label for="id4"><img src="../images/4.jpg" width="60"></label>
<img src="../images/4.jpg">
<input id="id5" name="ani" type="radio">
<label for="id5"><img src="../images/5.jpg" width="60"></label>
<img src="../images/5.jpg">
</div>
</div>
<style>
.boxes{display: grid;place-items: center; min-height: 40vw;}
.slider1 {width: 30vw; height: 20vw;position: relative; padding-top: 25vw; margin: 1vw auto;}
.slider1>img {position: absolute; left: 0; top: 0; transition: all 0.5s; width: 30vw; height: 25vw;}
.slider1 input[name='ani'] {display: none;}
.slider1 label { margin: 1vw 0 0 1vw; border: .3vw solid #999; float: left; cursor: pointer; transition: all 0.5s; opacity: 0.6; }
.slider1 label img {display: block;}
.slider1 input[name='ani']:checked+label {border-color: #666; opacity: 1;}
.slider1 input[name='ani']~img { opacity: 0; transform: scale(1.1);}
.slider1 input[name='ani']:checked+label+img {opacity: 1;transform: scale(1);}
</style>